<template>
  <el-row>
    <el-col :span="8" style="padding-right: 10px">
      <el-card class="box-card">
        <div class="user">
          <img :src="adminForm.avatar">
          <div class="userinfo">
            <p class="name">{{ adminForm.username }}</p>
            <p class="access">{{ adminForm.roleName }}</p>
          </div>
        </div>
        <div class="login-info">
          <p>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<span>{{ adminForm.nickname }}</span></p>
          <p>登录的时间：<span>{{ new Date().toLocaleDateString() }}</span></p>
        </div>
      </el-card>
      <el-card style="margin-top: 20px;height: 460px;">
        <el-table
          :data="tableData"
          style="width: 100%">
          <!--<el-table-column
            prop="name"
            label="课程">
          </el-table-column>
          <el-table-column
            prop="todayBuy"
            label="今日购买">
          </el-table-column>
          <el-table-column
            prop="monthBuy"
            label="本月购买">
          </el-table-column>
          <el-table-column
            prop="totalBuy"
            label="总购买">
          </el-table-column>-->
          <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val"/>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="padding-left: 10px">
      <div class="num">
        <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
          <div class="detail">
            <p class="price">￥{{item.value}}</p>
            <p class="desc">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px">
        <!--折线图-->
        <div ref="echarts1" style="height: 280px" ></div>
      </el-card>
      <div class="graph">
        <el-card style="height: 260px">
          <div ref="echarts2" style="height: 260px" ></div>
        </el-card>
        <el-card style="height: 260px">
          <div ref="echarts3" style="height: 240px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import { editAdmin,getMenuTest } from "../api";
  import * as echarts from 'echarts';
  import Cookie from "js-cookie";
    export default {
        name: "Home",
        data(){
            return{
                tableData: [],
                adminForm: {
                    id: '',
                    username: '',
                    avatar: '',
                    nickname: '',
                    password: '',
                    email: '',
                    phone: '',
                    idNumber: '',
                    delFlag: '',
                    roleName: '',
                },
                tableLabel:{
                    name: '课程',
                    todayBuy: '今日购买',
                    monthBuy: '本月购买',
                    totalBuy: '总购买'
                },
                countData: [
                    {
                        name: "今日支付订单",
                        value: 1234,
                        icon: "success",
                        color: "#2ec7c9"
                    },{
                        name: "今日收藏订单",
                        value: 1234,
                        icon: "shopping-bag-2",
                        color: "#c96800"
                    },{
                        name: "今日未支付订单",
                        value: 1234,
                        icon: "star-on",
                        color: "#008ac9"
                    },{
                        name: "今日支付订单2",
                        value: 1234,
                        icon: "success",
                        color: "#2ec7c9"
                    },{
                        name: "今日支付订单3",
                        value: 1234,
                        icon: "shopping-bag-2",
                        color: "#c96800"
                    },{
                        name: "今日支付订单4",
                        value: 1234,
                        icon: "star-on",
                        color: "#008ac9"
                    }
                ]
            }
        },
        methods:{
            setHome(){
                let type=JSON.parse(Cookie.get("type"));
                if (type==1){
                    let admin = JSON.parse(Cookie.get("admin"));
                    editAdmin(admin).then(({data})=>{
                        this.adminForm=data;
                    });
                }else {

                }
            },
            getTest(){
                /*console.log("test","test");
                getMenuTest().then(({ data })=>{
                    //console.log(data);
                });*/
            }
        },
        mounted() {
            this.setHome();
            // data返回的是一个包含其他信息的对象 { data }是对data的结构，只取了data.data的数据
            /*getData().then(({ data })=>{
                //console.log(data);
                //数据表
               const { tableData }=data;
               this.tableData=tableData;

               //折线图
                //基于准备好的dom，初始化echarts实例
                const echarts1 = echarts.init(this.$refs.echarts1);
                //指定图表的配置项和数据
                var echarts1option={};
                //处理数据xAxis
                const { orderData, userData,videoData }=data;
                //console.log(orderData.data);
                const xAxis= Object.keys(orderData.data[0]);
                const xAxisData={
                    data:xAxis
                };
                echarts1option.xAxis=xAxisData;
                echarts1option.yAxis={};
                echarts1option.legend=xAxisData;
                echarts1option.series =[];
                xAxis.forEach(key=>{
                    echarts1option.series.push({
                        name:key,
                        data:orderData.data.map(item => item[key]),
                        type: 'line'
                    });
                });
                //使用刚才指定的配置和数据显示图表
                echarts1.setOption(echarts1option);

                //柱状图
                const echarts2 = echarts.init(this.$refs.echarts2);
                const echart2soption={
                    legend:{
                        //图例文字颜色
                        textstyle:{
                            color: "#333"
                        }
                    },
                    grid:{
                        left: "20%"
                    },
                    //提示框
                    tooltip: {
                        trigger: "axis"
                    },
                    xAxis: {
                        type: "category",//类目轴
                            data: userData.map(item=>item.data),
                            axisLine: {
                            linestyle: {
                                color: "#17b3a3"
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            color: "#333"
                        }
                    },
                    yAxis:[
                        {
                            type: "value",
                            axisLine: {
                                linestyle: {
                                    color: "#17b3a3"
                                },
                            }
                        }
                    ],
                    color: [ "#2ec7c9","#b6a2de"],
                    series: [
                        {
                            name: '新增用户',
                            data: userData.map(item=>item.new),
                            type: 'bar'
                        },
                        {
                            name: '活跃用户',
                            data: userData.map(item=>item.active),
                            type: 'bar'
                        }
                    ]
                };
                echarts2.setOption(echart2soption);

                //饼状图
                const echarts3 = echarts.init(this.$refs.echarts3);
                const echarts3option={
                    tooltip: {
                        trigger: "item"
                    },
                    color: [
                        "#0f78f4",
                        "#dd536b",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1ct"
                    ],
                    series:[
                        {
                            data: videoData,
                            type: 'pie'
                        }
                    ]
                };
                echarts3.setOption(echarts3option);
            });
            this.getTest();*/
        }
    }
</script>

<style lang="less" scoped>
.user {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex ;
  align-items: center;
  img {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access {
      color: #999999;
    }
  }
}
.login-info{
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;
    span {
      color: #666666;
      margin-left: 60px;
    }
  }
}
.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: #ffffff;
  }
  .detail{
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .price {
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
      height: 30px;
    }
    .desc{
      font-size: 14px;
      color: #999999;
      text-align: center;
    }
  }
  .el-card{
    width: 32%;
    margin-bottom: 20px;
  }
}
.graph{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card{
    width: 48%;
  }
}
</style>
